Scriptel ScripTouch Keyboard Wedge API: Tutorial: 05

The EasyScript library now supports streaming signatures. This can be used to provide a live signing experience for your users where as soon as the pen hits the glass the signature starts transmitting to your application.

Handling streaming events is slightly different than handling the entire signature at once because you'll get pieces of the whole signature as they're generated.

Here's a quick example:

<!DOCTYPE html>
<html>
<head>
    <title>EasyScript Tutorial 05</title>
    <script type="application/javascript" src="scriptel-easyscript.js"></script>
    <script type="text/javascript">
        /**
         * This tutorial demonstrates how to use streaming callbacks
         * to provide a live signing experience with EasyScript devices.
         */
        function init() {
            //Get the canvas element from the document.
            var canvas = document.getElementById("signature");
            //Get the graphics context so we can clear the signature later.
            var ctx = canvas.getContext("2d");
            //Set the fill style to white.
            ctx.fillStyle = "white";
            //We need to keep track of the previous point so we can draw
            //a line segment later.
            var prevPoint = null;
            //Create a new ScriptelEasyScript handler
            var easyScript = new ScriptelEasyScript();
            //Adds a signature listener to the document that will automatically catch
            //any signatures "typed" within the document body.
            easyScript.addSignatureListener(document);
            //Adds a streaming callback to the EasyScript library,
            //this gets notified when events happen.
            easyScript.registerStreamingCallback(function(e) {
                switch (e.type) {
                    case "ScriptelSignatureMetaData":
                        ctx.fillRect(0,0,canvas.width,canvas.height);
                        break;
                    case "ScriptelNewStroke":
                        prevPoint = null;
                        break;
                    case "ScriptelCoordinate":
                        if (prevPoint != null) {
                            easyScript.drawSegmentOnCanvas(prevPoint, e, canvas, { "strokeStyle": "black", "lineWidth": 2 });
                        }
                        prevPoint = e;
                        break;
                    case "ScriptelCancelSignature":
                        ctx.fillRect(0,0,canvas.width,canvas.height);
                        prevPoint = null;
                        break;
                    case "ScriptelSignatureComplete":
                        break;
                }
            });
        }
    </script>
</head>
<body onload="init()">
    <canvas id="signature" width="800" height="213" style="border: 1px solid black"></canvas><br />
</body>
</html>

You'll notice the easyScript.registerStreamingCallback() call in the example. Your application should pass in a callback function that will receive events as they happen. When an event is generated this callback will be called. You should then check the type of the message and handle it however it makes sense to for your application. Currently the following event types exist:

ScriptelSignatureMetaData - This conveys information about the device being used to capture signatures such as firmware version, device model and protocol version.
ScriptelNewStroke - This indicates that a new stroke has begin (the pen was lifted and then put back down).
ScriptelCoordinate - A new coordinate is available.
ScriptelCancelSignature - The current signature has been aborted because the user clicked the "Cancel" button or the signing session has been interrupted.
ScriptelSignatureComplete - The current signature is complete.
ScriptelCardSwipe - On equipped devices this event is generated when a magnetic swipe is detected.

Tutorial: 05 - Streaming Signatures

05 - Streaming Signatures